iT邦幫忙

2024 iThome 鐵人賽
DAY 29
0
自我挑戰組

asp.net可以變出那些功能系列 第 29 篇

實用日語加入資料庫寫法:新增

16th鐵人賽
138 瀏覽

  • 分享至 

  • xImage
    •  

https://laihao2.com/Home/Contact_Create
https://ithelp.ithome.com.tw/upload/images/20241006/20119035EoEKqlinth.png

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表>

USE [ProductDB]
GO

/****** Object:  Table [dbo].[ChineseJapaneseTable]    Script Date: 2024/10/3 下午 06:16:42 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[ChineseJapaneseTable](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[Chinese] [nvarchar](max) NULL,
	[Japanese] [nvarchar](max) NULL,
	[Note] [nvarchar](max) NULL,
	[Category] [nvarchar](50) NULL,
 CONSTRAINT [PK__ChineseJ__3214EC27D468CAC3] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

這段 SQL 代碼用於在名為 ProductDB 的數據庫中創建一個名為 ChineseJapaneseTable 的表。以下是對代碼的逐行解釋：

1. 數據庫選擇

USE [ProductDB]
GO

這行代碼表示將當前數據庫上下文設置為 ProductDB，後續的所有 SQL 操作都將在該數據庫中執行。

2. 對象注釋

/****** Object:  Table [dbo].[ChineseJapaneseTable]    Script Date: 2024/10/3 下午 06:16:42 ******/

這是一個注釋，說明接下來的 SQL 代碼是用於創建 ChineseJapaneseTable 表，並包含了腳本生成的日期和時間。

3. 設置選項

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO
  • SET ANSI_NULLS ON：當該選項開啟時，任何與 NULL 進行比較的條件（如 column_name = NULL）都將返回 FALSE。要檢查 NULL 值，應使用 column_name IS NULL。
  • SET QUOTED_IDENTIFIER ON：當該選項開啟時，允許使用雙引號 " 來引用標識符（如列名和表名），從而可以使用關鍵字作為標識符。

4. 創建表

CREATE TABLE [dbo].[ChineseJapaneseTable](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[Chinese] [nvarchar](max) NULL,
	[Japanese] [nvarchar](max) NULL,
	[Note] [nvarchar](max) NULL,
	  NULL,
  • CREATE TABLE [dbo].[ChineseJapaneseTable]：創建一個名為 ChineseJapaneseTable 的表，屬於 dbo 架構。
  • [ID] [int] IDENTITY(1,1) NOT NULL：定義一個名為 ID 的整數字段，使用 IDENTITY(1,1) 表示該字段是自動遞增的，初始值為 1，每次遞增 1，且該字段不能為空。
  • [Chinese] [nvarchar](max) NULL：定義一個名為 Chinese 的字段，數據類型為可變長度的 Unicode 字符串，最大長度為 max，可以為空。
  • [Japanese] [nvarchar](max) NULL：定義一個名為 Japanese 的字段，類型與 Chinese 相同。
  • [Note] [nvarchar](max) NULL：定義一個名為 Note 的字段，類型與 Chinese 相同。
  • NULL：定義一個名為 Category 的字段，數據類型為可變長度的 Unicode 字符串，最大長度為 50，可以為空。

5. 主鍵約束

 CONSTRAINT [PK__ChineseJ__3214EC27D468CAC3] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
  • CONSTRAINT [PK__ChineseJ__3214EC27D468CAC3] PRIMARY KEY CLUSTERED：定義一個主鍵約束，名為 PK__ChineseJ__3214EC27D468CAC3，並且該主鍵是聚集索引。
  • ([ID] ASC)：指定以 ID 列為主鍵，並按升序排列。
  • WITH (...) ON [PRIMARY]：指定了聚集索引的一些選項，如：
    • PAD_INDEX = OFF：不填充索引頁。
    • STATISTICS_NORECOMPUTE = OFF：允許自動重新計算統計信息。
    • IGNORE_DUP_KEY = OFF：不忽略重覆鍵值錯誤。
    • ALLOW_ROW_LOCKS = ON 和 ALLOW_PAGE_LOCKS = ON：允許行級和頁級鎖。
    • OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF：不優化順序鍵。

6. 存儲位置

) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
  • ) ON [PRIMARY]：指定表的存儲位置為主文件組。
  • TEXTIMAGE_ON [PRIMARY]：指示對 nvarchar(max) 類型的數據使用的存儲位置，也為主文件組。

總結

這段代碼創建了一個存儲中文和日文文本的表，便於進行多語言處理和管理，並為 ID 列設置了主鍵以確保每一行數據的唯一性。

產生Models裡面類別檔dao>按:建置>

namespace WebApplication5.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;
   
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    [Table("ChineseJapaneseTable")]
    public partial class ChineseJapaneseTable
    {

        [Key]
        [Display(Name = "Id")]
        public int Id { get; set; }

        // 中文字段，允許不限制長度
        [Display(Name = "中文")]
        [Column(TypeName = "nvarchar(max)")]
        public string Chinese { get; set; }

        // 日文字段，允許不限制長度
        [Display(Name = "日文")]
        [Column(TypeName = "nvarchar(max)")]
        public string Japanese { get; set; }

        // 備註字段，允許不限制長度
        [Display(Name = "備註")]
        [Column(TypeName = "nvarchar(max)")]
        public string Note { get; set; }

        // 分類字段，限定最大長度為 50
        [Display(Name = "分類")]
        [StringLength(50)]
        public string Category { get; set; }

    }

}

這段代碼定義了一個名為 ChineseJapaneseTable 的模型類，使用 C# 和 Entity Framework（EF）框架。它主要用於表示一個包含中文、日文和其他相關字段的數據庫表。以下是代碼中各部分的詳細解釋：

命名空間和引用

namespace WebApplication5.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
}
  • namespace WebApplication5.Models: 定義了一個命名空間，包含與 Web 應用程序相關的模型。
  • using 語句：引入了一些必要的類和命名空間，方便後續代碼的使用，例如數據注解、數據庫表的映射等。

模型類定義

[Table("ChineseJapaneseTable")]
public partial class ChineseJapaneseTable
  • [Table("ChineseJapaneseTable")]: 這個特性指定了這個模型類對應的數據庫表名為 ChineseJapaneseTable。
  • public partial class ChineseJapaneseTable: 定義了一個公共的部分類（partial class），這允許類的定義在多個文件中分開。此類表示與 ChineseJapaneseTable 數據庫表相關的實體。

字段屬性

[Key]
[Display(Name = "Id")]
public int Id { get; set; }
  • [Key]: 這個特性表示 Id 屬性是該表的主鍵。
  • [Display(Name = "Id")]: 用於在用戶界面中顯示字段名稱的特性，表示這個屬性在視圖中顯示時的名稱為 "Id"。
  • public int Id { get; set; }: 定義一個名為 Id 的整數字段，代表表的唯一標識符。

接下來的字段是用於存儲中文、日文、備注和分類信息的：

[Display(Name = "中文")]
[Column(TypeName = "nvarchar(max)")]
public string Chinese { get; set; }
  • [Display(Name = "中文")]: 顯示名稱為 "中文"。
  • [Column(TypeName = "nvarchar(max)")]: 說明數據庫中的這個字段的類型為 nvarchar(max)，允許存儲任意長度的字符串。
  • public string Chinese { get; set; }: 定義一個名為 Chinese 的字符串字段。

相同的方式也適用於日文和備註字段：

[Display(Name = "日文")]
[Column(TypeName = "nvarchar(max)")]
public string Japanese { get; set; }

[Display(Name = "備註")]
[Column(TypeName = "nvarchar(max)")]
public string Note { get; set; }

最後是分類字段：

[Display(Name = "分類")]
[StringLength(50)]
public string Category { get; set; }
  • [StringLength(50)]: 這個特性限制了 Category 字段的最大長度為 50 個字符。
  • [Display(Name = "分類")]: 顯示名稱為 "分類"。

總結

該類用於將數據庫中的 ChineseJapaneseTable 表映射為一個 C# 對象模型，提供了中文、日文、備注和分類的存儲結構。通過使用數據注解，這些字段還可以在視圖中以人性化的方式展示，方便用戶理解和操作。

ProductDBContext裡面也是要加入
public virtual DbSet ChineseJapaneseTable { get; set; }

Controllers裡面的Entities>

public ActionResult Contact_Create()
        {
            ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
            return View();
        }
        //[AllowAnonymous]
        [HttpPost]


        public ActionResult Contact_Create(ChineseJapaneseTable cus)
        {
            if (ModelState.IsValid)
            {
                
                                                // 添加到數據庫
                _db.ChineseJapaneseTable.Add(cus);
                _db.SaveChanges();                   // 保存更改到數據庫

                return RedirectToAction("Contact");
            }

            return View(cus); // 如果模型驗證失敗，返回表單視圖並顯示錯誤信息
        }

解釋程式碼
這段 C# 代碼是一個 ASP.NET MVC 控制器的部分，涉及到創建一個聯系表單的功能。以下是對代碼的詳細解釋：

1. 方法定義

  • public ActionResult Contact_Create()：

    • 這是一個 GET 請求的方法，目的是展示聯系表單的視圖。
    • ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";：設置視圖的布局文件為 _Layout.cshtml，這個文件通常是共享的布局，用於定義頁面的整體結構。

  • return View();：返回一個默認的視圖，通常是與方法同名的視圖（Contact_Create.cshtml），用於展示聯系表單。

2. HttpPost 方法

  • [HttpPost] public ActionResult Contact_Create(ChineseJapaneseTable cus)：
    • 這是一個 POST 請求的方法，目的是處理用戶提交的表單數據。它接收一個參數 cus，這個參數是 ChineseJapaneseTable 類型的實例，代表表單提交的數據。

3. 模型驗證

  • if (ModelState.IsValid)：檢查提交的模型（即用戶輸入的數據）是否有效。如果所有驗證通過，則執行以下操作。

4. 數據庫操作

  • _db.ChineseJapaneseTable.Add(cus);：

    • 將有效的數據 cus 添加到數據庫上下文中，準備保存到 ChineseJapaneseTable 表。

  • _db.SaveChanges();：將所有掛起的更改保存到數據庫中，執行實際的插入操作。

5. 重定向

  • return RedirectToAction("Contact");：
    • 在成功添加數據到數據庫後，重定向到另一個動作（通常是顯示聯系信息的頁面）。

6. 返回視圖

  • return View(cus);：如果模型驗證失敗，返回原來的視圖，並將用戶輸入的數據 cus 傳回視圖。這樣可以在視圖中顯示用戶輸入的值以及任何驗證錯誤信息。

總結

這段代碼實現了一個簡單的聯系表單提交功能，允許用戶輸入數據並將其保存到數據庫。如果輸入的數據驗證不通過，則會返回原表單以供用戶修改。在成功提交後，會重定向用戶到指定的頁面。

產生畫面View程式碼

@model WebApplication5.Models.ChineseJapaneseTable


@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Contact_Create";
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Contact_Create</title>
    <style>
        .form-control {
            width: 100%; /* 或使用具体的宽度，比如 300px */
            box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的宽度 */
        }
    </style>
</head>
<body>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")


    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>中文和日文資料表:新增</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Chinese, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Chinese, new { htmlAttributes = new { @class = "form-control", style = "width: 100%;" } })
                @Html.ValidationMessageFor(model => model.Chinese, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Japanese, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Japanese, new { htmlAttributes = new { @class = "form-control", style = "width: 100%;" } })
                @Html.ValidationMessageFor(model => model.Japanese, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Note, new { htmlAttributes = new { @class = "form-control", style = "width: 100%;" } })
                @Html.ValidationMessageFor(model => model.Note, "", new { @class = "text-danger" })
            </div>
        </div>

        @*<div class="form-group">
            @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Category, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
            </div>
        </div>*@

        <div class="form-group">
            @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
            @{
                var listItemsCategory = new List<SelectListItem>
{
                    new SelectListItem { Text = "請選擇", Value = "請選擇", Selected = true },
                    new SelectListItem { Text = "入境審查", Value = "入境審查" },
                    new SelectListItem { Text = "N2考試內容", Value = "N2考試內容" },
                    new SelectListItem { Text = "訂單", Value = "訂單" },
                    new SelectListItem { Text = "職場日文", Value = "職場日文" },
                    new SelectListItem { Text = "生活日語", Value = "生活日語" },
                    new SelectListItem { Text = "俚語", Value = "俚語" },
                    new SelectListItem { Text = "格言", Value = "格言" },
                    new SelectListItem { Text = "其他", Value = "其他" },
                    new SelectListItem { Text = "買東西", Value = "買東西" }
                };
            }
            @Html.DropDownList("Category", listItemsCategory, htmlAttributes: new { @class = "form-control", style = "width: 100%;" })
            @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="新增" class="btn btn-default" />
            </div>
        </div>
    </div>
    }

   
</body>
</html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 的 Razor 視圖，主要用於顯示一個表單，允許用戶輸入中文和日文的數據。下面是對代碼的詳細解釋：

1. 視圖模型

  • @model WebApplication5.Models.ChineseJapaneseTable：
    • 指定該視圖使用的模型類型為 ChineseJapaneseTable，這意味著視圖將使用該模型的屬性來生成表單。

2. 布局和標題

  • Layout = "~/Views/Shared/_Layout.cshtml";：

    • 設置該視圖的布局為 _Layout.cshtml，這是一個共享的布局文件，通常定義了頁面的總體結構（例如，導航欄、頁腳等）。

  • ViewBag.Title = "Contact_Create";：

    • 設置視圖的標題為 "Contact_Create"，這將用於 <title> 標簽和可能的頁面標題。

3. HTML 結構

  • <!DOCTYPE html>、<html>、<head>、<body>：
    • 這部分代碼定義了 HTML 文檔的結構，包含文檔類型、頭部和主體部分。

4. 樣式定義

  • <style> 標簽中：
    • 設置 .form-control 的樣式，確保表單控件寬度為 100%，並且設置 box-sizing: border-box; 以避免在添加 padding 和 border 時寬度變化。

5. 腳本引入

  • @Scripts.Render("~/bundles/jquery") 和 @Scripts.Render("~/bundles/jqueryval")：
    • 引入 jQuery 和 jQuery 驗證庫的腳本，提供表單驗證和其他 JavaScript 功能。

6. 表單創建

  • @using (Html.BeginForm())：

    • 開始一個 HTML 表單，默認提交到當前控制器的 POST 動作。

  • @Html.AntiForgeryToken()：

    • 用於防止跨站請求偽造 (CSRF) 攻擊，生成一個隱藏的防偽令牌。

7. 表單內容

  • 表單的整體結構為 .form-horizontal，表示使用水平排列的表單。

  • <h4>中文和日文資料表:新增</h4>：

    • 表單的標題。

  • @Html.ValidationSummary(true, "", new { @class = "text-danger" })：

    • 顯示模型驗證錯誤的摘要信息（如果有的話），並使用 text-danger 類樣式顯示為紅色。

8. 輸入字段

  • 對於每個輸入字段（如 Chinese、Japanese 和 Note），都使用以下結構：

    • @Html.LabelFor(...)：生成標簽。
    • @Html.EditorFor(...)：生成輸入控件，帶有 form-control 類樣式，確保寬度為 100%。
    • @Html.ValidationMessageFor(...)：顯示特定字段的驗證錯誤信息（如果有的話）。

  • 分類下拉框：

    • 使用 @Html.DropDownList(...) 生成下拉列表，包含多個選項，允許用戶選擇分類。
    • 選項是通過 List<SelectListItem> 創建的，包含不同的分類。

9. 提交按鈕

  • <input type="submit" value="新增" class="btn btn-default" />：
    • 提交按鈕，用戶點擊時會提交表單。

10. 結尾

  • }：關閉 using 語句，結束表單的 HTML 結構。

總結

這段代碼創建了一個表單，用於輸入中文和日文的數據，並提供了分類選擇。表單中包括了適當的驗證信息，確保用戶輸入的數據有效。整體設計上，使用了 ASP.NET MVC 的 Razor 語法來動態生成 HTML，結合了表單控件的樣式和驗證功能。

大家明天見~/images/emoticon/emoticon01.gif


上一篇
簡約風首頁看留言的地方
下一篇
加上資料表後的: 實用日語 列表
系列文
asp.net可以變出那些功能 共 30 篇
  1. 26
    現在很流行的VUE
  2. 27
    簡約風
  3. 28
    簡約風首頁看留言的地方
  4. 29
    實用日語加入資料庫寫法:新增
  5. 30
    加上資料表後的: 實用日語 列表
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22201 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙